<template>
  <div>
    <el-dialog title="新建商品" :visible.sync="dialogFormVisible" :show-close="false" width="35%" :center="true" @close="handleClose" custom-class="custom-dialog" >
      <el-form :model="form" ref="form" label-position="left" :label-width="formLabelWidth">
        <el-form-item label="溯源码" prop="traceNumber" :rules="[{ required: true, message: '请输入溯源码' }]">
          <el-input v-model.number="form.traceNumber" autocomplete="off" class="rounded-input"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName" :rules="[{ required: true, message: '请输入商品名称' }]">
          <el-input v-model="form.goodsName" autocomplete="off" class="rounded-input"></el-input>
        </el-form-item>
        <el-form-item label="生产商" prop="traceName" :rules="[{ required: true, message: '请输入生产商' }]">
          <el-input v-model="form.traceName" autocomplete="off" class="rounded-input"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="location" :rules="[{ required: true, message: '请输入商品地址' }]">
          <el-input v-model="form.location" autocomplete="off" class="rounded-input"></el-input>
        </el-form-item>
        <el-form-item label="质检情况" prop="quality" :rules="[{ required: true, message: '请选择质检情况', trigger: 'change' }]">
          <el-radio-group v-model="form.quality">
            <el-radio label="0">优质</el-radio>
            <el-radio label="1">合格</el-radio>
            <el-radio label="2">不合格</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('popup', false)" round>取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" round>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {
        goodsName: '',
        traceName: '',
        traceNumber: '',
        quality: '',
        location: ''
      },
      formLabelWidth: '120px',
      scanData: '',
      testData: {
        '1000001': { 'goodsName': '商品1', 'traceName': '生产商单位1', 'location': '生产地点1', 'quality': '1' },
        '1000002': { 'goodsName': '商品2', 'traceName': '生产商单位2', 'location': '生产地点2', 'quality': '2' },
        '1000003': { 'goodsName': '商品3', 'traceName': '生产商单位3', 'location': '生产地点3', 'quality': '0' },
        '1000004': { 'goodsName': '商品4', 'traceName': '生产商单位4', 'location': '生产地点4', 'quality': '1' },
        '1000005': { 'goodsName': '商品5', 'traceName': '生产商单位5', 'location': '生产地点5', 'quality': '2' },
        '1000006': { 'goodsName': '商品6', 'traceName': '生产商单位6', 'location': '生产地点6', 'quality': '0' },
        '1000007': { 'goodsName': '商品7', 'traceName': '生产商单位7', 'location': '生产地点7', 'quality': '1' },
        '1000008': { 'goodsName': '商品8', 'traceName': '生产商单位8', 'location': '生产地点8', 'quality': '2' },
        '1000009': { 'goodsName': '商品9', 'traceName': '生产商单位9', 'location': '生产地点9', 'quality': '0' },
        '1000010': { 'goodsName': '商品10', 'traceName': '生产商单位10', 'location': '生产地点10', 'quality': '1' },
        '1000011': { 'goodsName': '商品11', 'traceName': '生产商单位11', 'location': '生产地点11', 'quality': '2' },
        '1000012': { 'goodsName': '商品12', 'traceName': '生产商单位12', 'location': '生产地点12', 'quality': '0' },
        '1000013': { 'goodsName': '商品13', 'traceName': '生产商单位13', 'location': '生产地点13', 'quality': '1' },
        '1000014': { 'goodsName': '商品14', 'traceName': '生产商单位14', 'location': '生产地点14', 'quality': '2' },
        '1000015': { 'goodsName': '商品15', 'traceName': '生产商单位15', 'location': '生产地点15', 'quality': '0' },
        '1000016': { 'goodsName': '商品16', 'traceName': '生产商单位16', 'location': '生产地点16', 'quality': '1' },
        '1000017': { 'goodsName': '商品17', 'traceName': '生产商单位17', 'location': '生产地点17', 'quality': '2' },
        '1000018': { 'goodsName': '商品18', 'traceName': '生产商单位18', 'location': '生产地点18', 'quality': '0' },
        '1000019': { 'goodsName': '商品19', 'traceName': '生产商单位19', 'location': '生产地点19', 'quality': '1' },
        '1000020': { 'goodsName': '商品20', 'traceName': '生产商单位20', 'location': '生产地点20', 'quality': '2' }
      }
    };
  },
  props: ['dialogFormVisible'],
  mounted() {
    document.addEventListener('keydown', this.handleScannerInput);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleScannerInput);
  },
  methods: {
    handleClose() {
      this.dialogFormVisible = false;
      this.$emit('popup', false);
    },
    handleScannerInput(event) {
      if (!this.scanData) {
        this.scanData = '';
      }
      if (event.key !== 'Enter') {
        this.scanData += event.key;
      } else {
        this.fillFormData(this.scanData);
        this.scanData = ''; // 重置扫描数据，准备下一次扫描
      }
    },
    fillFormData(traceNumber) {
      const data = this.testData[traceNumber];
      if (data) {
        // 数据填充完毕后自动进行表单验证和提交
        data.traceNumber = parseInt(traceNumber);
        this.formSubmit(data);
      } else {
        console.error('没有找到对应的溯源码数据:', traceNumber);
        alert('扫描的溯源码无效，请重新扫描！');
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
          // 表单验证成功，这里可以进行后续的提交操作，例如调用API等
          this.$emit('confirmPopup', this.form);
          alert('表单提交成功！');
        } else {
          // 表单验证失败
          alert('表单数据有误，请检查！');
          return false;
        }
      });
    },
    formSubmit(val) {
      axios({
        method: 'post',
        url: '/produce',
        data: {
          ...val,
          quality: parseInt(val.quality),
          producerAddress: localStorage.getItem('account')
        }
      })
          .then(ret => {
            if (ret.data.ret !== 1) {
              // 已有溯源码校验
              if (ret.data.ret === 0 && ret.data.msg === 'traceNumber already exist') {
                this.$message({
                  message: '该溯源码已存在，请重新创建',
                  type: 'error',
                  center: true
                });
              } else {
                this.$message({
                  message: '提交失败',
                  type: 'error',
                  center: true
                });
              }
              return;
            }
            this.$blockInfo.setBlockInfo("Pro" + val.traceNumber, ret.data.data);
            console.log(this.$blockInfo.getBlockInfo("Pro" + val.traceNumber));
            this.$message({
              message: '提交成功',
              type: 'success',
              center: true
            });
          })
          .catch(err => {
            console.log(err);
          });
      this.popup = false;
    }
  }
};
</script>

<style scoped>
.custom-dialog {
  border-radius: 10px;
  border: 2px solid #ebeef5; /* 外围边框样式 */
  font-family: 'Arial', sans-serif; /* 字体样式 */
}

.rounded-input {
  border-radius: 5px;
  border: 1px solid #dcdfe6; /* 输入框边框样式 */
  padding: 8px; /* 调整内边距 */
}

.dialog-footer {
  text-align: center;
  margin-top: 20px;
}

.dialog-footer .el-button {
  margin-right: 10px;
  border-radius: 5px;
}
</style>
